<template>
  <div class="app-container">
    <el-card>
      <PageSearch
        v-permission="`get:/goods/list`"
        :search-fields="searchFields"
        :load-data="getList"
        :page-param="pageParam"
      />

      <el-row style="display: inline-flex;padding: 20px 0" :gutter="20">
        <el-col>
          <el-button
            v-permission="`post:/goods/add`"
            type="primary"
            plain
            icon="el-icon-plus"
            @click.native.prevent="toAdd"
          >添加
          </el-button>
        </el-col>
        <el-col>
          <el-button
            v-permission="`post:/goods/edite`"
            type="primary"
            plain
            icon="el-icon-edit"
            :disabled="selection.length!==1"
            @click.native.prevent="toEdite"
          >编辑
          </el-button>
        </el-col>

        <el-col>
          <el-button
            v-permission="`post:/goods/delete`"
            type="danger"
            plain
            icon="el-icon-delete"
            :disabled="selection.length===0"
            @click.native.prevent="handleDelete"
          >删除
          </el-button>
        </el-col>
      </el-row>

      <el-row style="padding: 20px 0">
        <el-table
          v-permission="`get:/goods/list`"
          :data="datalist"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />

          <el-table-column v-slot="scope" label="封面">
            <template>
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.cover"
                fit="fill"
              />
            </template>
          </el-table-column>

          <el-table-column v-slot="scope" label="类别">
            <template>
              <el-tag v-for="tag in getCateNames(scope.row) ">{{ tag }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="名称" prop="name" />
          <el-table-column label="价格" prop="price" />
          <el-table-column label="售后保障" prop="ensure" />
          <el-table-column label="销量" prop="sales" />

          <el-table-column
            label="状态"
          ><template v-slot="scope">
            {{ scope.row.status===0 ? '已上架':'已下架' }}
            <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="-1"
              @change="statusSwitch(scope.row)"
            />
          </template>
          </el-table-column>
        </el-table>

      </el-row>
      <el-row
        v-permission="`get:/goods/list`"
        style="padding: 20px 0"
      >
        <el-pagination
          :current-page.sync="pageParam.pageNum"
          :page-sizes="[10, 50, 100, 200,1]"
          :page-size="pageParam.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageParam.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>

    </el-card>
  </div>
</template>

<script>

import PageSearch from '@/pp-components/PageSearch.vue'
import { getList, del, statusSwitch } from '@/api/pp/goods/goods'
import { getList as getCateList } from '@/api/pp/goods/catgorize'
import permission from '@/directive/permission/index.js'
export default {
  components: { PageSearch },
  directives: { permission },
  data() {
    const catOptions = []
    this.getCateList().then(res => {
      this.cateList = res.data.list
      res.data.list.forEach(e => {
        catOptions.push({ label: e.name, value: e.cateId })
      })
    })
    console.log(catOptions)
    return {
      selection: [],
      datalist: [],
      cateList: [],
      searchFields: [
        { name: 'name', placeholder: '商品名称模糊匹配' },
        { name: 'catId', placeholder: '选择类别', type: 'select', options: catOptions }
      ],
      pageParam: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }

    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    statusSwitch(row) {
      console.log(row)
      statusSwitch(row.goodsId).then(res => {
        this.$msgOk(res)
        this.getList()
      }).catch(() => {
        this.getList()
      })
    },
    handleDelete() {
      this.$ask({ message: '请确删除' }).then(() => {
        const ids = []
        this.selection.forEach(e => {
          ids.push(e.goodsId)
        })
        del(ids.join(',')).then(res => {
          this.$msgOk(res)
        })
      })
    },
    handleSizeChange(val) {
      this.pageParam.pageSize = val
      this.pageParam.pageNum = 1
      this.getList()
    }, handleCurrentChange(val) {
      this.pageParam.pageNum = val
      this.getList()
    },
    getCateNames(row) {
      const names = []
      if (row.catIds) {
        row.catIds.forEach(e => {
          const cate = this.cateList.find(c => c.cateId === e)
          if (cate) names.push(cate.name)
        })
      }
      return names
    },
    toAdd() {
      this.$router.push('/goods/add')
    },
    toEdite() {
      this.$router.push('/goods/edite?id=' + this.selection[0].goodsId)
    },
    getList() {
      getList(this.pageParam).then(res => {
        this.pageParam.total = res.data.total
        this.datalist = res.data.list
      })
    },
    async getCateList() {
      return await getCateList(null)
    },
    handleSelectionChange(val) {
      this.selection = val
    }
  }
}
</script>

<style  scoped>

</style>
